<template>
	<div class="team-content">
		<div class="team-header">
			<h4>该代理团队返点比例</h4>
			<el-button @click="handleBack">
				返回
			</el-button>
		</div>
		<div class="team-table">
			<Table :data="[agentInfo]" :columns="columns" />
		</div>
	</div>
</template>

<script>
import Table from '@/components/Table'

export default {
	name: 'OwnPointList',
	components: {
		Table
	},
	props: {
		agentInfo: {
			type: Object,
			default: {}
		}
	},
	data() {
		const rebateRender = ({ row, column }) => {
			const num = row[column.property]
			if (row.status === 0) {
				return '-'
			}
			if (row.status === 3 && num < 0) {
				return '-'
			}
			return `${Number(num)}%`
		}

		const headerRender = (label, tips, subLable) => {
			const _subLable = subLable || '团队返点'
			return (
				<div class='header'>
					{label}
					<div>{_subLable}</div>
					{tips && (
						<el-tooltip
							content={`${label}${_subLable}：${tips}`}
							placement='top-start'
							effect='dark'
						>
							<i class='el-icon-question' />
						</el-tooltip>
					)}
				</div>
			)
		}

		return {
			columns: [
				{
					prop: 'texasRebate',
					header: () =>
						headerRender(
							'德州-俱乐部',
							this.$t('agent.texasRebate_tips')
						),
					customRender: rebateRender
				},
				{
					prop: 'texasInsuranceRebate',
					header: () =>
						headerRender(
							'德州-保险',
							this.$t('agent.texasInsuranceRebate_tips'),
							'团队分成'
						),
					customRender: rebateRender
				},
				{
					header: () => headerRender('真人'),
					prop: 'actualPersonRebate',
					customRender: rebateRender
				},
				{
					header: () => headerRender('体育'),
					prop: 'sportsRebate',
					customRender: rebateRender
				},
				{
					header: () => headerRender('彩票'),
					prop: 'lotteryTicketRebate',
					customRender: rebateRender
				},
				{
					header: () => headerRender('棋牌'),
					prop: 'chessRebate',
					customRender: rebateRender
				},
				{
					header: () => headerRender('电竞'),
					prop: 'esportsRebate',
					customRender: rebateRender
				}
			],
			data: []
		}
	},
	watch: {
		// agentInfo: {
		//     immediate: true,
		// 	deep: true,
		//     handler(val) {
		//         this.loadData()
		// 	}
		// }
	},
	created() {},
	methods: {
		// 处理api
		async loadData() {
			try {
				const ret = await this.$api.rebateRateQuery({
					userName: this.agentInfo.userName,
					userId: this.agentInfo.userId,
					userType: this.agentInfo.userType
				})
				if (ret.code === 200) {
					this.data = ret?.data
				}
			} catch (err) {
				console.log(err)
			}
		},
		handleBack() {
			this.$emit('back')
		}
	}
}
</script>
<style scoped lang="scss">
.team-header {
	display: flex;
	margin-bottom: 10px;
	align-items: flex-end;
	h4 {
		font-weight: 400;
		font-size: 16px;
		margin: 0;
		flex: 1;
	}
}
.team-table {
	margin-bottom: 20px;
	width: 1200px;
}
.header {
	position: relative;

	.el-icon-question {
		position: absolute;
		font-size: 12px;
		top: 25px;
		right: 5px;
		cursor: pointer;
		&:after {
			font-size: 17px;
		}
	}
}
</style>
